<template>
    <div class="all">
        <div class="box">

            <el-form :model="form" label-width="120px" style="margin-top: 50px;">
                <el-form-item label="用户名:">
                    <el-input v-model="form.username" style="width: 300px;" />
                </el-form-item>
                <el-form-item label="密码:">
                    <el-input v-model="form.password" style="width: 300px;" type="password" show-password />
                </el-form-item>
            </el-form>
            <el-form-item style="margin-left: 260px;">
                <el-button type="primary" @click="login()">登陆</el-button>
                <el-button type="primary">重置</el-button>
            </el-form-item>


        </div>

    </div>
</template>

<script setup>
import { ref } from "vue";
import api from "../utils/request.js"
import { ElMessage } from 'element-plus'
import { useRouter } from "vue-router"
import { useUserStore } from "../stores/useUserStore.js"

const router = useRouter()
const user = useUserStore()


const form = ref({
    username: 'admin',
    password: "123321",

})

//登陆
const login = async () => {
    let result = await api.post("/js/login", form.value)
    console.log(result.data);
    if (result.data.code === 404) {
        ElMessage({
            showClose: true,
            message: '用户名不存在',
            type: 'error',
        })
    } else if (result.data.code === 400) {
        ElMessage({
            showClose: true,
            message: '密码错误',
            type: 'error',
        })
    } else {
        ElMessage({
            showClose: true,
            message: '登陆成功',
            type: 'success',
        })
        router.push({
            path: '/home/control',
        })
        // user.changeUser(result.data)
        sessionStorage.setItem("token", result.data.token)
        sessionStorage.setItem("username", result.data.username)
        sessionStorage.setItem("roleId", result.data.roleId)
        sessionStorage.setItem("rolename", result.data.rname)
    }



}


</script>

<style lang="less" scoped>
.all {
    width: 100%;
    height: 100%;
    background-image: url("./img/980.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;

}

.box {
    width: 500px;
    height: 300px;
    position: absolute;
    background-color: white;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    text-shadow: 2px 2px 5px black;

}
</style>